<template>
    <div class="container">
        <div class="left" v-if="isShow">
            <button type="primary" @click="isCollapse = !isCollapse" class="isCollapse">
                <span v-show="isCollapse">展开</span>
                <span v-show="!isCollapse">折叠</span>
            </button>
            <div class="menus">
                <el-menu :default-active="activeIndex" class="el-menu-vertical-demo" :collapse="isCollapse" :collapse-transition="true" router>
                    <el-menu-item :index="`/index/${furl}/${item.name}`" v-for="item in menul" :key="item.id">
                        <i :class="`${item.icon} iconfont`"></i>
                        &nbsp;
                        <span slot="title">{{ item.label }}</span>
                    </el-menu-item>
                </el-menu>
            </div>
        </div>
        <div class="right">
            <router-view></router-view>
        </div>
    </div>
</template>

<script>
import { mapState, mapMutations } from 'vuex'
import { getselfApi, getmenuApi } from '@/requset/api'

export default {
    data() {
        return {
            isCollapse: false,
            activeIndex: '',
            furl: '',
        }
    },
    computed: {
        ...mapState('backstage', ['menuList', 'menuType']),
        ...mapMutations('backstage'),
        isShow() {
            return sessionStorage.getItem('permissionIdList') ? sessionStorage.getItem('permissionIdList') !== '0' : true
        },
    },
    methods: {
        getmenu(menu) {
            function buildTree(data, parentId = null) {
                let tree = []
                data.forEach((item) => {
                    if (item.parent === parentId) {
                        let children = buildTree(data, item.id)
                        if (children.length) {
                            item.children = children
                        }

                        item.value = item.id
                        delete item.id
                        tree.push(item)
                    }
                })
                return tree
            }

            if (this.menuType.length > 0) {
                this.setmenu(menu, this.menuType)
                return
            } else if (this.menuType.length == 0) {
                getmenuApi().then((res) => {
                    let list = []
                    let list_zy = []
                    res.data.data
                        .filter((item) => menu.split(',').includes(item.id.toString()))
                        .forEach((item) => {
                            if (item.type === 1 || item.type === 2) {
                                item.children = []
                                item.id < 100 ? list.push(item) : list_zy.push(item)
                            } else {
                                if (item.id < 100) {
                                    try {
                                        list.find((i) => item.parent == i.id).children.push(item)
                                    } catch (error) {}
                                } else {
                                    list_zy.find((i) => item.parent == i.id).children.push(item)
                                }
                            }
                        })

                    res.data.data
                        .filter((item) => item.type === 3)
                        .forEach((item) => {
                            let parent = list.find((i) => i.value === item.parent)
                            if (parent && parent.hasOwnProperty('children'))
                                parent.children.push({
                                    value: item.id,
                                    label: item.label,
                                })
                        })
                    this.setmenu(menu, res.data.data)
                })
            }
        },
        setmenu(menu, data) {
            let menuIds = menu
            let list1 = data.filter((item) => menuIds.split(',').includes(item.id.toString()))
            let a = list1.filter((e) => e.parent == data.filter((e) => e.name == this.furl)[0].id)
            this.menul = a
            let arr = this.$route.fullPath.split('/')
            if (arr[arr.length - 1] == this.furl) {
                this.$router.push(this.$route.path + '/' + a[0].name)
                this.$set(this, 'activeIndex', this.$route.path + '/' + a[0].name)
            } else {
                this.$set(this, 'activeIndex', this.$route.path)
            }
        },
    },
    created() {
        const storedMenu = sessionStorage.getItem('menu')
        if (storedMenu) {
            this.userInfo = {
                menu: storedMenu,
            }
            this.getmenu(storedMenu)
        } else {
            getselfApi()
                .then((res) => {
                    this.userInfo = res.data
                    sessionStorage.setItem('menu', res.data.menu)

                    this.getmenu(res.data.menu)
                })
                .catch((error) => {})
        }
    },
    watch: {
        $route: {
            handler(val, oldval) {
                if (oldval.path.includes(val.path)) {
                    this.$router.push(oldval.path)
                }
                this.$set(this, 'activeIndex', this.$route.path)
            },
            deep: true,
        },
    },
}
</script>

<style lang="less" scoped>
.container {
    width: 100%;
    height: 100%;
    overflow: hidden;
    display: flex;
    justify-content: space-between;

    .left {
        height: 100%;
        transition: all 0.15s;
        -webkit-transition: width 0.15s;
        -moz-transition: width 0.15s;
        -webkit-transition: width 0.15s;
        -o-transition: width 0.15s;
        background-image: url(@/assets/DeviceDia/tree_left_bg.png);
        background-size: 100% 120%;
        background-position: 100%;
        .menus {
            overflow-y: auto;
            height: calc(100% - 40px);
        }
        .isCollapse {
            height: 40px;
            background-color: transparent;
            line-height: 40px;
            width: 65px;
            color: #3edfe4;
            border: none;
            cursor: pointer;
            border-radius: 4px;
            font-size: 18px;
            font-weight: 600;
        }

        i {
            font-size: 22px;
            color: aqua;
        }
    }

    .right {
        height: 100%;
        float: left;
        flex-grow: 1;
        transition: all 0.3s;
    }
}
</style>
<style lang="less">
.container {
    .left {
        .el-submenu__title {
            background-image: none !important;
        }

        .el-menu-vertical-demo:not(.el-menu--collapse) {
            width: 180px;
        }

        .el-menu {
            background-color: transparent !important;
            color: #0bccde !important;
            border: none !important;
        }
        .el-menu-item {
            color: #b2e3ff !important;
        }
        .el-menu-item:focus,
        .el-menu-item:hover {
            outline: 0;
            background-color: #2c7383 !important;
            color: white !important;
        }

        .el-menu-item.is-active {
            background-color: #2c7383 !important;
            color: white !important;
        }
    }
}
</style>
